<template>
  <el-date-picker :style="{
    width: proxy.$size(width, '100%'),
  }" v-model="keyword" v-bind="{
    type: 'daterange',
    'range-separator': '至',
    'start-placeholder': '开始日期',
    'end-placeholder': '结束日期',
    format: 'YYYY-MM-DD',
    'value-format': 'YYYY-MM-DD',
    shortcuts: shortcuts,
    ...$attrs,
    disabled: typeof $attrs.disabled === 'function' ? $attrs.disabled(data) : $attrs.disabled
  }" @change="changeBtn" />
</template>
<script setup lang="ts">
import moment from 'moment';
import { getCurrentInstance, reactive, onMounted, ref } from 'vue';
const { proxy } = getCurrentInstance() as any;
//获取父级数据
const props = withDefaults(
  defineProps<{
    data: any;
    dataName?: any;
    width?: string | number;
  }>(),
  {

  },
);
const keyword = computed({
  get() {
    if (props.dataName) {
      if (Array.isArray(props.dataName)) {
        return [props.data[props.dataName[0]], props.data[props.dataName[1]]]
      } else {
        return props.data[props.dataName]
      }
    } else {
      return props.data
    }
  },
  set(val) {
    if (props.dataName) {
      if (Array.isArray(props.dataName)) {
        props.dataName.forEach((key: string, index: number) => {
          props.data[key] = val ? val[index] : ''
        })
      } else {
        props.data[props.dataName] = val
      }
    } else {
      props.data = val;
    }
  },
});
const shortcuts = [
  {
    text: '今天',
    value: () => {
      const end = new Date();
      const start = new Date();
      return [start, end];
    },
  },
  {
    text: '本月',
    value: () => {
      const end = new Date();
      const start = moment().startOf('month');
      return [start, end];
    },
  },
  {
    text: '上月',
    value: () => {
      const end = moment().subtract(1, 'months').endOf('month');
      const start = moment().subtract(1, 'months').startOf('month');
      return [start, end];
    },
  },
  {
    text: '7天内',
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
      return [start, end];
    },
  },
  {
    text: '15天内',
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 15);
      return [start, end];
    },
  },
  {
    text: '30天内',
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
      return [start, end];
    },
  },
  {
    text: '最近三个月',
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
      return [start, end];
    },
  },
];
const emit = defineEmits<{
  //fn为父组件引入子组件是定义的子组件事件属性，可随意定义
  (event: 'changeBtn', val: any, form: any): void;
}>();
const changeBtn = (val: any) => {
  emit('changeBtn', val, props.data)
};


onMounted(() => {

});
</script>
<style scoped></style>
